<template>
    <div>
        <section class="content-header">应急准备管理&nbsp;/&nbsp;应急通讯录&nbsp;/&nbsp;查看应急通讯录</section>
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">物资编号：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.goodsid}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">物资名称：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.goodsname}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">数量：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.num}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">有效期：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.exp}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">部门：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.sysDept.name}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">责任人：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.sysPerson.personName}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">手机号码：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.phone}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注：</label>
                            <div class="col-sm-8">
                                <textarea
                                    class="form-control"
                                    rows="4"
                                    placeholder="请输入事件描述"
                                    maxlength="80"
                                    v-model="form.remarks"
                                    readonly
                                ></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error">
                    <!-- <div class="box-body">
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderName && !form.orderName) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入事件名称</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderType && !form.orderType) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件类别</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderLevel && !form.orderLevel) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件等级</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderOrigin && !form.orderOrigin) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件来源</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderPhone && !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.orderPhone)) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系电话</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderArea && !form.orderArea ) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件片区</span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderPipeid && !form.orderPipeid) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件管线</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderDept && !form.orderDept) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任部门</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.personId && !form.personId ) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任人</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderTimelimit && !form.orderTimelimit) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择处理时限</span>
                        </div>
                    </div>-->
                </div>
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">存放点：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.save}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4" style="text-align: center">
                        <button type="button" class="btn btn-default" @click="back()">返回</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                sysDept: {},
                sysPerson: {}
            }
        };
    },
    components: {},
    mounted() {
        this.getDetails();
    },
    methods: {
        //详情
        getDetails() {
            this.$api.zhunbei
                .goodsDetail({
                    id: this.$route.query.id
                })
                .then(res => {
                    if (res.success) {
                        this.form = res.data;
                    }
                });
        },
        back() {
            this.$router.push({ path: "material" });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.control-label {
    padding: 0px !important;
    line-height: 34px;
    text-align: right;
}
.form-control {
    margin: 0px;
    border-radius: 4px !important;
}
</style>
